<template>
	<view class="ChangePhone">
		<view class="ChangePhoneBox">
			<view class="FromBox">
				<u-field v-model="mobile" label="原手机号"	placeholder="请填写原手机号"></u-field>
				<u-field v-model="code"	label="验证码"	placeholder="请填写验证码">
					<u-button size="mini" slot="right" type="success" @click="getCode">{{codeText}}</u-button>
				</u-field>
				<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
				<u-field v-model="mobile1" label="新手机号"	placeholder="请填写新手机号"></u-field>
				<u-field v-model="code1" label="验证码"	placeholder="请填写验证码">
					<u-button size="mini" slot="right" type="success" @click="getCode1">{{codeText1}}</u-button>
				</u-field>
				<u-verification-code ref="uCode1" @change="codeChange1"></u-verification-code>
				<view style="margin-top: 60upx;">
					<u-button shape="circle" class="custom-style" @click="over">完成</u-button>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				mobile:'',
				code:'',
				codeText:'',
				mobile1:"",
				code1:"",
				codeText1:"",
				reqFlag:true
			}
		},
		methods: {
			over(){
				if(!this.reqFlag){
					return false;
				}
				let obj = {};
				obj.mobile = this.mobile;
				obj.code = this.code;
				obj.mobile1 = this.mobile1;
				obj.code1 = this.code1;
				this.reqFlag = false;
				this.$u.api.userResetMobile(obj).then(res=>{
					//console.log(res);
					this.$refs.uToast.show({
						type:"success",
						title:"修改成功",
						duration:2000
					})
					setTimeout(()=>{
						this.reqFlag = true;
					},1500)
				})
				.catch(err=>{
					this.reqFlag = true;
				})
			},
			codeChange(text) {
				this.codeText = text;
			},
			codeChange1(text) {
				this.codeText1 = text;
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					
					let obj = {};
					obj.mobile = this.mobile;
					obj.type = 6;
					if(!this.mobile){
						this.$refs.uToast.show({
							type:"error",
							title:"请输入手机号",
							duration:2000
						})
						return false;
					}
					console.log(app.$vm.globalData)
					if(!app.$vm.globalData.phoneReg.test(this.mobile)){
						this.$refs.uToast.show({
							type:"error",
							title:"请输入正确的手机号",
							duration:2000
						})
						return false;
					}
					this.$u.api.sendMessage(obj).then(res=>{
						//console.log(res)
						uni.hideLoading();
						this.$refs.uToast.show({
							type:"success",
							title:"发送成功",
							duration:2000
						})
						this.$refs.uCode.start();
					})
				}else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			getCode1() {
				if(this.$refs.uCode1.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					
					let obj = {};
					obj.mobile = this.mobile1;
					obj.type = 6;
					if(!this.mobile){
						this.$refs.uToast.show({
							type:"error",
							title:"请输入手机号",
							duration:2000
						})
						return false;
					}
					console.log(app.$vm.globalData)
					if(!app.$vm.globalData.phoneReg.test(this.mobile)){
						this.$refs.uToast.show({
							type:"error",
							title:"请输入正确的手机号",
							duration:2000
						})
						return false;
					}
					this.$u.api.sendMessage(obj).then(res=>{
						//console.log(res)
						uni.hideLoading();
						this.$refs.uToast.show({
							type:"success",
							title:"发送成功",
							duration:2000
						})
						this.$refs.uCode1.start();
					})
				}else {
					this.$u.toast('倒计时结束后再发送');
				}
			}
		}
	}
</script>

<style scoped lang="less">
.status_bar{
	height: var(--status-bar-height);
	width: 100%;
}
.ChangePhone{
	background-color: #F3F3F3;
	min-height: 100vh;
	overflow: auto;
	// padding-top: 100upx;
	.ChangePhoneBox{
		.FromBox{
			background: #FFFFFF;
			opacity: 1;
			border-radius: 8upx;
			padding: 48upx 32upx;
			.custom-style{
				background-color: #FFAC3F;
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
}
</style>
